<template>
	<div class="login">
		<div class="logo">
			<van-image
					height="6rem"
					width="8rem"
					fit="cover"
					:src="imgSrc"
			/>
		</div>
		<van-form @submit="loginBtnClick">
			<van-field
					v-model="user.user_msg"
					name="user"
					placeholder="用户名/手机"
					:rules="[{ required: true, message: '请填写用户名或手机号' }]"
			/>
			<van-field
					v-model="user.user_pwd"
					type="password"
					name="password"
					placeholder="密码"
					:rules="[{ required: true, message: '请填写验证码' }]"
			/>
			<div style="margin: 16px">
				<van-button block type="info" native-type="submit" >登录</van-button>
			</div>
		</van-form>
		<div >
			<a href="#" style="float: left">忘记密码？</a>
			<a href="register" style="float: right">注册账号</a>
		</div>
		<div>

		</div>
	</div>
</template>

<script >
	import LoginService from "@/views/Login/LoginService";
	export default{
		name:"Login",
		data(){
			return {
				value:'',
				password:'',
				user:{
					user_msg:'',
					user_pwd:'',
				},

				imgSrc: require('../../assets/logo.png')
			}
		},
		methods: {

			onSubmit(values) {
				console.log('submit', values);
			},
			loginBtnClick(){
				LoginService.loginBtnClick(
				r=>{
					if(r){
						this.$store.commit('changeLogin',true);
						this.$store.commit('deleteAllDetails');
						this.axios.get(this.GLOBAL.foodsInCart).then(res=>{
							res.data.cart.details.forEach(cur=>{
								let details=this.$store.getters.getDetails(cur.food_id);
								details.push(cur);
								this.$store.commit('addDetails',{foodID:cur.food_id,details:details});
							});
						});
						this.$router.push({
							name: 'Home'
						});
					}else{
						alert("账号或密码错误");
					}
				},{params:this.user});
			}
		},
	}
</script>

<style lang="less">
	.login{
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		.logo{
			text-align: center;
			margin: 5% 0;
		}
		div{
			overflow: hidden;
		}
		a{
			color: slategray;
		}
		a:hover{
			color: skyblue;
		}
		.van-button{
			border-radius: 12px;
		}
	}
</style>
